<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
	</head>

	<body>

		<form class="layui-form" action="" style="width: 1200px;">
			<div class="layui-form-item" style="margin-top: 50px;">
				<label class="layui-form-label">ID</label>
				<div class="layui-input-block">
					<input style="width: 200px;" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="float: right; margin-right: 550px; margin-top: -52px;">
				<label class="layui-form-label">名称</label>
				<div class="layui-input-block">
					<input style="width: 200px;" type="text" name="username" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">照片宽度</label>
				<div class="layui-input-block">
					<input style="width: 200px;" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="float: right;margin-right: 550px; margin-top: -52px;">
				<label class="layui-form-label">照片高度</label>
				<div class="layui-input-block">
					<input style="width: 200px;" type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">有图片</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="是" title="是" checked="">
					<input type="radio" name="sex" value="否" title="否">
					<!--<input type="radio" name="sex" value="禁" title="禁用" disabled="">-->
				</div>
			</div>

			<div class="layui-form-item" pane="" style="float: right;margin-right: 646px; margin-top: -52px;">
				<label class="layui-form-label">禁用</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked="">
					<input type="radio" name="sex" value="女" title="女">
					<!--	<input type="radio" name="sex" value="禁" title="禁用" disabled="">-->
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>

		<script src="./plugins/layui/layui.js"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			layui.use(['form', 'layedit', 'laydate'], function() {
				var form = layui.form,
					layer = layui.layer,
					layedit = layui.layedit,
					laydate = layui.laydate;

				//日期
				laydate.render({
					elem: '#date'
				});
				laydate.render({
					elem: '#date1'
				});

				//创建一个编辑器
				var editIndex = layedit.build('LAY_demo_editor');

				//自定义验证规则
				form.verify({
					title: function(value) {
						if(value.length < 5) {
							return '标题至少得5个字符啊';
						}
					},
					pass: [/(.+){6,12}$/, '密码必须6到12位'],
					content: function(value) {
						layedit.sync(editIndex);
					}
				});

				//监听指定开关
				form.on('switch(switchTest)', function(data) {
					layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
						offset: '6px'
					});
					layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
				});

				//监听提交
				form.on('submit(demo1)', function(data) {
					layer.alert(JSON.stringify(data.field), {
						title: '最终的提交信息'
					})
					return false;
				});

			});
		</script>

	</body>

</html>